/* Catalogo Ez Auto Match Style.css */


/* ===================================
          fondo pa todito 
====================================*/

.hero-bg {
    background-image:
      linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.7)),
      url('../images/Fondo-Catalogo.jpg');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    width: 100%;
    height: 70vh; /* mejor que px en mobile */
    min-height: 500px;

    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1024px) {
    .hero-bg {
        background-attachment: fixed;
        height: 800px;
    }
}

html, body {
  -webkit-overflow-scrolling: touch;
}

.hero-bg {
  transform: translateZ(0);
}

/* =========================================================*/

html {
  scroll-behavior: smooth;
}

/* 1. Configuración de Colores de Marca */
:root {
    --brand-color: #feb01a;      /* Amarillo principal */
    --brand-dark: #dd9716;       /* Amarillo oscuro para hovers */
    --brand-black: #111827;      /* Negro para botones y textos */
    --brand-light: #f9fafb;      /* Gris ultra claro para fondos */
}

/* 2. Importación de Fuente (Inter es la estándar para este estilo moderno) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--brand-light);
    color: var(--brand-black);
}

/* 3. Utilidades de Tailwind personalizadas */
.bg-brand { background-color: var(--brand-color); }
.text-brand { color: var(--brand-color); }
.border-brand { border-color: var(--brand-color); }
.hover\:bg-brand:hover { background-color: var(--brand-color); }
.hover\:bg-brand-dark:hover { background-color: var(--brand-dark); }

/* 4. Efecto de las Tarjetas (Car Cards) */
.card-hover {
    transition: transform 0.3s ease, shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 5. Estilo para las imágenes del catálogo */
.object-cover {
    transition: transform 0.5s ease;
}

.card-hover:hover .object-cover {
    transform: scale(1.05); /* Zoom suave al entrar a la tarjeta */
}

/* 6. Animación de letras (para los labels del filtro) */
/* Esto hace que las letras aparezcan una por una si usas el efecto de JS */
span[style*="transition"] {
    display: inline-block;
    will-change: transform, opacity;
}

/* 7. Estilos de los Selectores del Filtro */
select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
}

@keyframes fire-animation {
  0% {
    box-shadow: 0 0 10px #ef4444, 0 0 20px #f97316;
    background-position: 0% 50%;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px #f97316, 0 0 35px #fbbf24;
    transform: scale(1.08);
    background-position: 100% 50%;
  }
  100% {
    box-shadow: 0 0 10px #ef4444, 0 0 20px #f97316;
    background-position: 0% 50%;
    transform: scale(1);
  }
}

.hot-offer-fire {
  /* Gradiente tipo lava */
  background: linear-gradient(-45deg, #ee0979, #ff6a00, #ffb800, #ee0979);
  background-size: 300% 300%;
  animation: fire-animation 2s infinite ease-in-out;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 4px;
}

  /* Forzamos que el hover siempre use el color brand (sustituye por tu amarillo exacto si es necesario) */
  .nav-link-item:hover {
    color: #FFB800 !important; /* Aquí va tu color brand */
    cursor: pointer;
  }

  /* 1. Unificar el fondo para que no se vea blanco si haces scroll de más */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #f9fafb !important; /* El mismo gris del footer */
    overflow-x: hidden; /* Evita que el ancho 100vw cause scroll lateral */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* 2. El contenido principal debe empujar al footer al fondo */
  main, section:first-of-type {
    flex: 1;
  }

  /* 3. Asegurar que el footer sea bloque puro sin márgenes */
  footer {
    display: block !important;
    margin-bottom: 0 !important;
    padding-bottom: 3rem; /* Espacio extra interno para que no quede pegado al texto */
  }

  /* En caso de que Tailwind no esté tomando el color del config */
  .hover\:text-brand:hover {
    color: #feb01a !important; /* Usa aquí el código exacto de tu naranja/amarillo */
  }

.animated-text span {
    display: inline-block;
    white-space: pre; /* Mantiene los espacios correctamente */
}

/* Transición de salida */
body {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* Clase que activa el desvanecimiento */
body.fade-out {
    opacity: 0;
}

/* ===========================
   TABLET Y DESKTOP
   min-width: 768px
   =========================== */
@media (min-width: 768px) {
  /* Hero: Desktop visible */
  .hero-desktop {
    display: block;
  }

  .hero-mobile {
    display: none;
  }

  /* Offers: Desktop visible */
  .offers-desktop {
    display: block;
  }

  .offers-mobile {
    display: none;
  }

  /* 1. LA IMAGEN: Centrada verticalmente */
  .capa-trasera {
      z-index: 10 !important;
      opacity: 0.6;
      top: 50% !important; /* La bajamos al medio */
      transform: translateY(-50%) scale(0.95) translateX(-20px) !important; /* La centramos y movemos a la izquierda */
  }

  /* 2. EL FORMULARIO (Card Azul): Lo centramos verticalmente también */
  .capa-frontal {
      z-index: 50 !important;
      top: 50% !important; /* Lo bajamos al medio */
      right: 0 !important; /* Lo pegamos a la derecha */
      transform: translateY(-50%) scale(1.02) !important; /* Lo centramos verticalmente */
  }

  /* 3. EFECTO HOVER: Para que no se muevan al poner el mouse */
  #img-capa:hover {
      transform: translateY(-50%) scale(1.05) translateX(0px) !important;
      z-index: 60 !important;
      opacity: 1 !important;
  }
  
  #card-azul:hover {
      transform: translateY(-50%) scale(1.05) !important;
      z-index: 60 !important;
  }
}


    /* Solo aplicamos la lógica de capas en pantallas medianas o superiores */
    @media (min-width: 768px) {
        .capa-frontal {
            z-index: 50 !important;
            transform: scale(1.02);
        }
        .capa-trasera {
            z-index: 10 !important;
            opacity: 0.6;
            transform: scale(0.95) translateX(-20px);
        }
    }
    
    /* En móvil reseteamos transformaciones para que no se vea raro */
    @media (max-width: 767px) {
        .capa-frontal, .capa-trasera {
            transform: none !important;
            opacity: 1 !important;
        }
    }